<template>
  <div class="user-setting-wrapper">
    <a-spin :spinning="loading">
      <div class="search-box">
        <a-input v-model="filterText" placeholder="输入关键字进行过滤"></a-input>
        <a-button v-if="isRoot" type="primary" :loading="loading" @click="addLevel1">
          <span>新增</span>
        </a-button>
        <a-button type="primary" :loading="loading" @click="handleSave"><span>保存</span></a-button>
        <!-- <a-button type="primary" @click="handleAsnyc" :loading="loading">同步权限</a-button> -->
      </div>

      <div class="tree-box">
        <el-tree
          ref="tree"
          draggable
          class="filter-tree"
          :check-strictly="checkStrictly"
          show-checkbox
          :data="treeData"
          default-expand-all
          :filter-node-method="filterNode"
          node-key="keyId"
          :expand-on-click-node="false"
          @check-change="handleCheckChange"
        >
          <span
            slot-scope="{ node, data }"
            class="custom-tree-node"
            @mouseenter="handleMouseEnter(data)"
            @mouseleave="handleMouseLeave(data)"
          >
            <span>{{ data.name }}</span>
            <span v-show="data.keyId === currentId" v-if="isRoot">
              <a-button type="link" @click.stop="add(node, data)">新增</a-button>
              <a-button type="link" @click.stop="edit(node, data)">编辑</a-button>
              <a-button type="link" @click.stop="remove(node, data)">删除</a-button>
            </span>
          </span>
        </el-tree>
      </div>
    </a-spin>

    <AddEditMenu ref="addEditMenu" @onRefresh="fetchTreeData(currentCustomerId)" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import AddEditMenu from './AddEditMenu'
import { getCustomerTypeDetail, upsertCustomerTypeMenu } from '@/api/customerType'
import { forEachTree } from '@/utils/tool'
export default Vue.extend({
  components: { AddEditMenu },
  data() {
    return {
      currentId: 0,
      loading: false,
      filterText: '',
      treeData: [],
      checkStrictly: false,
    }
  },
  computed: {
    ...mapGetters('customerType', ['currentCustomerId', 'customerType']),
    isRoot() {
      return this.currentCustomerId === '843801558032068610'
    },
  },
  watch: {
    currentCustomerId(id) {
      console.log(id)

      this.fetchTreeData(id)
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    fetchTreeData(costomerTypeId) {
      this.treeData = []
      this.loading = true
      this.checkStrictly = true
      getCustomerTypeDetail(costomerTypeId).then((result) => {
        this.treeData = [...result.menuList]
        this.setCheckedNodes()
        setTimeout(() => {
          this.checkStrictly = false
        }, 1000)
        this.loading = false
      })
    },
    handleSave() {
      this.loading = true
      upsertCustomerTypeMenu({
        id: this.currentCustomerId,
        customerType: this.customerType,
        menuList: this.treeData,
      }).then(() => {
        this.loading = false
        this.fetchTreeData(this.currentCustomerId)
      })
    },
    handleMouseEnter(node) {
      this.currentId = node.keyId
    },
    handleMouseLeave() {
      this.currentId = 0
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.includes(value)
    },
    handleCheckChange(node, checked) {
      node.status = checked ? 1 : 0
    },
    setCheckedNodes() {
      this.$nextTick(() => {
        const result = []
        forEachTree(this.treeData, (node) => {
          if (node.status === 1) {
            result.push({ ...node })
          }
        })
        this.$refs.tree.setCheckedNodes(result)
      })
      // this.$refs.tree.setCheckedKeys([1])
    },
    addLevel1() {
      this.$refs.addEditMenu.open(0, null, this.treeData)
    },
    add(node, data) {
      console.log(node)
      this.$refs.addEditMenu.open(1, data, this.treeData)
    },
    edit(node, data) {
      console.log(node)
      this.$refs.addEditMenu.open(2, data, this.treeData)
    },
    remove(node, data) {
      const that = this
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex((d) => d.keyId === data.keyId)
        children.splice(index, 1)

        upsertCustomerTypeMenu({
          id: that.currentCustomerId,
          customerType: this.customerType,
          menuList: that.treeData,
        }).then(() => {
          that.loading = false
          that.fetchTreeData(that.currentCustomerId)
        })
      })
    },
  },
})
</script>
<style lang="scss" scoped>
.user-setting-wrapper {
  .search-box {
    @apply flex px-4 space-x-2;
  }

  .tree-box {
    height: calc(100vh - 250px);
    overflow-y: auto;
    padding: 20px;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: rgba(50, 50, 50, 0.25);
      border: 2px solid transparent;
      border-radius: 10px;
      background-clip: padding-box;
    }

    &::-webkit-scrollbar-track {
      background-color: rgba(50, 50, 50, 0.05);
    }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>
